<!doctype html>
<html lang="en">
<head>
    <title>Grid - Overview</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Overview" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    
    <link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.2.3.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijpager.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.9.1.custom.min.js" type="text/javascript"></script>
    <script src="../../external/globalize.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.all.2.3.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijpager.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.wijmo.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
                allowSorting: true
            });

            $("#demo1").wijgrid({
                allowSorting: true,

                columns: [
                  { // number
                    dataKey: 0,
                    headerText: "<span class='ui-icon ui-icon-calculator' style='left:0;'></span> Number"
                  },
                  {
                    headerText: "<span class='ui-icon ui-icon-info' style='left:0;'></span>Personal info",
                    columns: [
                       // nationality
                       { dataKey: 1, headerText: "<span class='ui-icon ui-icon-suitcase' style='left:0;'></span> Nationality" },
                       // player 
                       { dataKey: 2, headerText: "<span class='ui-icon ui-icon-person' style='left:0;'></span> Player" },
                       // age
                       { dataKey: 5, headerText: "<span class='ui-icon ui-icon-info' style='left:0;'></span> Age" },
                       // birthplace
                       { dataKey: 7, headerText: "<span class='ui-icon ui-icon-calendar' style='left:0;'></span> Birthplace" }  
                    ]
                  },
                  {
                    headerText: "<span class='ui-icon ui-icon-info' style='left:0;'></span>Team related info",
                    columns: [
                       { dataKey: 3, headerText: "<span class='ui-icon ui-icon-clipboard' style='left:0;'></span> Position" },
                       { dataKey: 4, headerText: "<span class='ui-icon ui-icon-transferthick-e-w' style='left:0;'></span> Handedness" },
                       { dataKey: 6, headerText: "<span class='ui-icon ui-icon-calendar' style='left:0;'></span> Acquired" }
                    ]
                  }
                ],

                data: $("#demo").wijgrid("data")
            }); 
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                Custom header icons</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <p>Using inline html:</p>
            <table id="demo">
               <thead>
                  <tr>
                     <th><span class="ui-icon ui-icon-calculator" style="left:0;"></span>Number</th>
                     <th><span class="ui-icon ui-icon-suitcase" style="left:0;"></span>Nationality</th>
                     <th><span class="ui-icon ui-icon-person" style="left:0;"></span>Player</th>
                     <th><span class="ui-icon ui-icon-clipboard" style="left:0;"></span>Position</th>
                     <th><span class="ui-icon ui-icon-transferthick-e-w" style="left:0;"></span>Handedness</th>
                     <th><span class="ui-icon ui-icon-info" style="left:0;"></span>Age</th>
                     <th><span class="ui-icon ui-icon-calendar" style="left:0;"></span>Acquired</th>
                     <th><span class="ui-icon ui-icon-calendar" style="left:0;"></span>Birthplace</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                    <th>27</th><td>Canada</td><td>Adams, Craig</td><td>RW</td><td>R</td><td>32</td><td>2009</td><td>Seria, Brunei</td>
                  </tr>
                  <tr>
                    <th>43</th><td>Canada</td><td>Boucher, Philippe</td><td>D</td><td>R</td><td>36</td><td>2008</td><td>Saint-Apollinaire, Quebec</td>
                  </tr>
                  <tr>
                    <th>24</th><td>Canada</td><td>Cooke, Matt</td><td>LW</td><td>L</td><td>30</td><td>2008</td><td>Belleville, Ontario</td>
                  </tr>
                  <tr>
                    <th>87</th><td>Canada</td><td>Crosby, Sidney (C)</td><td>C</td><td>L</td><td>21</td><td>2005</td><td>Cole Harbour, Nova Scotia</td>
                  </tr>
                  <tr>
                    <th>1</th><td>United States</td><td>Curry, John</td><td>G</td><td>L</td><td>25</td><td>2007</td><td>Shorewood, Minnesota</td>
                  </tr>
               </tbody>
            </table>

            <p>Using the <b>headerText</b> option:</p>
            <table id="demo1">
            </table>
	
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
               This sample shows how to customize a column header.
            </p>
        </div>
    </div>
</body>
</html>
